<template>
  <div class="page">
    <h4 style="margin-left: 3px;">筛选</h4>
    <el-row :gutter="20">
      <el-form id="formbox" ref="formInline" :inline="true" :model="formInline">
        <el-col :span="8" class="mb20">
          <el-form-item label="流程名称 :" prop="flowName">
            <el-input
              clearable
              v-model="formInline.flowName"
              placeholder="请输入流程名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="流程类型 :" prop="flowType">
            <el-select
              v-model="formInline.flowType"
              placeholder="请选择流程类型"
            >
              <el-option label="采集" value="采集"></el-option>
              <el-option label="回填" value="回填"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="状态 :" prop="isEnable">
            <el-select v-model="formInline.isEnable" placeholder="请选择状态">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="修改时间 :" prop="modifyTime">
            <el-date-picker
             :disabled-date="disableFutureDates"
              v-model="formInline.modifyTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6" class="form-button">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset('formInline')">重置</el-button>
            <el-button type="primary" @click="addEditResidents">新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="table-container">
      <el-col :span="24"
        ><h4>RPA流程 (共{{ total }}条)</h4></el-col
      >
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      border
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
      tooltip-effect="light"
      row-key="id"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="setClassName"
     
    >
      <!-- v-loading="loading" -->

      <el-table-column type="index" label="序号"  fixed="left" width="80" align="center" />
      <el-table-column
        prop="userName"
        label="账号"
      width="120"
        align="center"
        show-overflow-tooltip
        fixed="left"
      />
      <el-table-column
        prop="password"
        label="密码"
      width="120"
        align="center"
        show-overflow-tooltip
     
      />
      <el-table-column
        prop="flowName"
        label="流程名称"
      width="120"
        align="center"
        show-overflow-tooltip
     
      />
      <el-table-column
        prop="assemblyName"
        label="组件名称"
        align="center"
     width="120"
        show-overflow-tooltip
      />

      <el-table-column
        prop="ip"
        label="IP地址"
        align="center"
       width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="closeFlowName"
        label="关闭浏览器流程名称"
        align="center"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="closeAssemblyName"
        label="关闭浏览器组件名称"
        width="180"
        align="center"
   
        show-overflow-tooltip
      />
      <el-table-column
        prop="flowType"
        label="流程类型"
        align="center"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="isEnable"
        align="center"
        label="状态"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        prop="desc"
        label="描述"
        align="center"
        width="120"
        show-overflow-tooltip
      />

      <el-table-column
        prop="createTime"
        align="center"
         width="180"
        label="修改时间"
        show-overflow-tooltip
      />

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="150"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            text=""
            size="small"
            type="primary"
            @click="openEditResidents(scope.row)"
            >编辑</el-button
          >
          <el-button
            text=""
            size="small"
            type="danger"
            @click="delFollow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" style="display: flex; justify-content: end;margin-bottom: 50px;">
      <el-pagination
        v-if="this.total > 0"
        v-model:currentPage="this.currentPage"
        v-model:page-size="this.pageSize"
        :total="this.total"
        :page-sizes="[10, 20, 50, 100, 500]"
        class="new-pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
    <EditDialog ref="editDialogRef" :dialogObj="dialogObj" @getList="getList" />

    <!--@reloadTable="handleQuery" -->
  </div>
</template>

<script lang="ts">
import MenuCheck from "@/components/menu-check/index.vue";
import DeptList from "@/components/dept-list/index.vue";
import EditDialog from "@/pages/examples/rpa/components/editDialog.vue";
import http from "@/utils/request";
import { ElMessage } from "element-plus";
import { jsxDEV } from "vue/jsx-runtime";
const disableFutureDates = (time) =>  time > new Date();
export default {
  components: {
    MenuCheck,
    DeptList,
    EditDialog,
  },
  data() {
    return {
      //记录条数
      total: 1,
      //每页条数
      pageSize: 10,
      //当前页码
      currentPage: 1,
      //选择条数
      selectionCount: 0,
      //选择数组
      multipleSelection: [],
      //全选状态
      checkedAll: false,
      dialogObj: {
        //弹窗标题
        editResidentsTitle: "",
        //弹窗是否显示
        isDialogVisible: false,
        DialogDate: {},
      },
      //表格数据
      tableData: [
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
        {
          id: 1,
          name: "张三",
        },
        {
          id: 2,
          name: "李四",
        },
      ],
      ruleform: {
        name: "",
      },
      formInline: {
        flowName: "", // 流程名称

        flowType: "", // 流程类型

        isEnable: "", // 状态

        modifyTime: "", // 修改时间
      },
    };
  },
  methods: {
    disableFutureDates,
  
    onSubmit() {
      this.getList();
    },
    getList(){
      const requestData = { page: this.currentPage, size: this.pageSize };
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          requestData[key] = this.formInline[key];
        }
      }
      //@ts-ignore
      if(requestData.modifyTime){
           //@ts-ignore
        requestData.startTime=requestData.modifyTime[0];
        //@ts-ignore
        requestData.endTime=requestData.modifyTime[1];
          //@ts-ignore
          delete requestData.modifyTime;
      }
      
      console.log(requestData);
      http.post('/rpaFlowInfo/getPageList',requestData).then((res)=>{
        //@ts-ignore
        if(res.code==200){
          this.tableData=res.data.list;
          this.total=res.data.total;
        }
      })
    },
    //重置搜索
    onReset(formName) {
      this.$refs[formName].resetFields();
    
      this.currentPage = 1;
    },
    addEditResidents(row){
      this.dialogObj.editResidentsTitle = "新增RPA流程";
      this.dialogObj.isDialogVisible = true;
    },
    //打开编辑页
    openEditResidents(row) {
      this.dialogObj.editResidentsTitle = "编辑";
      this.dialogObj.isDialogVisible = true;
      this.dialogObj.DialogDate = JSON.parse(JSON.stringify(row));
    },
    //删除随访
    delFollow(row) {
      this.$confirm("是否确定删除该流程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          http.post("/rpaFlowInfo/deleteRpaFlowInfo", {id:row.id}).then((res) => {
            //@ts-ignore
            if (res.code === 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.getList();
              this.$refs.multipleTableRef!.clearSelection();
            }
          })
          
        })
        .catch(() => {});
    },
    // 改变页面容量
    handleSizeChange(val: number) {
      this.pageSize = val;
      this.getList();
      // handleQuery();
    },

    // 改变页码序号
    handleCurrentChange(val: number) {
      this.currentPage = val;
      this.getList();
      // handleQuery();
    },
    checkSelectable() {
      return this.checkedAll != true;
    },
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;
        console.log(this.selectionCount);

        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if(val.length==this.total||val.length==this.pageSize){
        this.checkedAll = true;
        this.selectionCount=val.length;
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      }

      // console.log("val",val);
      // if(multipleSelection.value.length==0){
      //   checkedAll.value=false;
      // }
    },
    setClassName({ column }) {
      return this.checkedAll == true ? "all-disabled" : "";
    },
    //新增体检
    exportRecord() {},
    //导入
    importSelect() {},
    //导出
    exportSelect() {},
    //删除
    testSt() {},
    //更新his
    showUpload() {},
  },
  computed: {},
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.page {
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}
#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.mb20 {
  /* margin: 0 20px; */
}
.tb{
  padding: 0 20px;
  /* overflow: hidden;
   margin-top: 2vw; */
  overflow-y: scroll;
}
:deep(.el-input__wrapper) {
  width: 230px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
.form-button {
  display: flex;
  justify-content: start;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.tr {
  text-align: right;
  height: 50px;
  line-height: 50px;
}
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
  display: none;
}

.new-pagination {
  margin: 30px 0 10px 0 !important;
}
</style>
